<template>
	<view>
		<view class="loadingPage" v-if="!userInfo">
			<u-loading-page :loading="loading"></u-loading-page>
		</view>
		<view class="noData flex-center" v-if="!token || !userInfo.genealogy_id">
			<view class="noData-title" v-if="userInfo.is_member === 1">您已经是创谱会员</view>
			<view class="noData-btn flex-center" @click="create">立即创建家谱</view>
		</view>
		<block v-else>
			<view class="header">
				<image :src="mixiImgUrl + '/static/topbj.png'" mode="widthFix" class="header-bg"></image>
				<view class="header-c flex-sp">
					<view class="header-c-l">
						<view class="header-c-l-list">
							<text>家谱名称:</text>{{genealogy.info.name || ''}}
						</view>
						<view class="header-c-l-list">
							<text :decode="true"> 堂&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</text>{{genealogy.info.hall_num || ''}}
						</view>
						<view class="header-c-l-list">
							<text>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</text>{{genealogy.info.address || ''}}
						</view>
					</view>
					<view class="header-c-r flex-center">
						<image src="/static/家族祠堂.png" mode=""></image>
					</view>
				</view>
				<view class="header-f">
					<view class="header-f-l">
						<view>
							<view class="header-f-l-num">{{genealogy.num || 0}}人</view>
							<view class="header-f-l-title">成员</view>
						</view>
						<view>
							<view class="header-f-l-num">{{genealogy.activate_num || 0}}人</view>
							<view class="header-f-l-title">激活</view>
						</view>
					</view>
					<view class="header-f-r flex-center">邀请家人</view>
				</view>
			</view>
			<view class="user flex-sp">
				<view class="user-l">
					<view class="user-l-img">
						<image :src="genealogy.user.avatar" mode=""></image>
					</view>
					<view class="user-l-name">{{genealogy.user.nickname || ''}}</view>
					<view class="user-l-status">
						<image :src="mixiImgUrl + '/static/hypt.png'" mode=""></image>
					</view>
					<view class="user-l-title">创建员</view>
				</view>
				<view class="user-r">
					<image src="/static/下一步.png" mode=""></image>
				</view>
			</view>
			<view class="tab">
				<view class="tab-item flex-center" @click="toPage('家谱树')">
					<image :src="mixiImgUrl + '/static/jiapus.png'" mode=""></image>
					家谱树
				</view>
				<view class="tab-item flex-center" @click="toPage('字辈谱')">
					<image :src="mixiImgUrl + '/static/zibeipu.png'" mode="" style="width: 28rpx;"></image>
					字辈谱
				</view>
				<view class="tab-item flex-center" @click="toPage('世系图')">
					<image :src="mixiImgUrl + '/static/shixitu.png'" mode="" style="width: 47rpx;"></image>
					世系图
				</view>
				<view class="tab-item flex-center">
					<image src="/static/纪念馆.png" mode=""></image>
					纪念馆
				</view>
			</view>
			<view class="introduction">
				<view class="introduction-t flex-sp">
					<view class="introduction-t-name">第一始祖</view>
					<view class="introduction-t-r flex-center">
						查看全部
						<image src="/static/下一步.png" mode=""></image>
					</view>
				</view>
				<view class="introduction-c">
					<view>
						<view class="introduction-c-avatar flex-center">
							<image :src="genealogy.info.ancestry_img" mode="widthFix"></image>
						</view>
						<view class="introduction-c-name">{{genealogy.info.ancestry || ''}}</view>
						<view class="introduction-c-tx">
							{{genealogy.info.ancestry_detail || ''}}
						</view>
					</view>
				</view>
			</view>
			<view class="introduction" v-if="genealogy.info.family_rules">
				<view class="introduction-t flex-sp">
					<view class="introduction-t-name">家规家训</view>
					<view class="introduction-t-r flex-center">
						查看全部
						<image src="/static/下一步.png" mode=""></image>
					</view>
				</view>
				<view class="introduction-tx">
					{{genealogy.info.family_rules || ''}}
				</view>
			</view>
			<view class="introduction" v-if="genealogy.info.foreword">
				<view class="introduction-t flex-sp">
					<view class="introduction-t-name">前言</view>
					<view class="introduction-t-r flex-center">
						查看全部
						<image src="/static/下一步.png" mode=""></image>
					</view>
				</view>
				<view class="introduction-tx">
					{{genealogy.info.foreword || ''}}
				</view>
			</view>
			<view class="introduction">
				<view class="introduction-t flex-sp">
					<view class="introduction-t-name">廖家起源</view>
					<view class="introduction-t-r flex-center">
						查看全部
						<image src="/static/下一步.png" mode=""></image>
					</view>
				</view>
				<view class="introduction-c">
					<view>
						<view class="introduction-c-avatar flex-center">
							<image :src="genealogy.info.family_origin_img" mode="widthFix"></image>
						</view>
						<view class="introduction-c-tx">
							{{genealogy.info.family_origin || ''}}
						</view>
					</view>
				</view>
				<!-- <view class="introduction-tx">
					{{genealogy.info.family_origin || ''}}
				</view> -->
			</view>
			<!-- <view class="introduction">
				<view class="introduction-t flex-sp">
					<view class="introduction-t-name">后序</view>
					<view class="introduction-t-r flex-center">
						查看全部
						<image src="/static/下一步.png" mode=""></image>
					</view>
				</view>
				<view class="introduction-tx">
					诚实守信 、见义勇为、清白做人、敬岗爱业。
				</view>
			</view> -->
			<view class="introduction" v-if="genealogy.info.develop_list.length > 0">
				<view class="introduction-t flex-sp">
					<view class="introduction-t-name">发展历程</view>
					<view class="introduction-t-r flex-center">
						查看全部
						<image src="/static/下一步.png" mode=""></image>
					</view>
				</view>
				<view class="development">
					<!-- <view class="development-list">
						<view class="development-l">
							2024
						</view>
						<view class="development-r">
							· 举家搬迁到湖南省
						</view>
					</view> -->
					<view class="development-list" v-for="it in genealogy.info.develop_list">
						<view class="development-l">
							{{it.key || ''}}
						</view>
						<view class="development-r">
							· {{it.value || ''}}
						</view>
					</view>
					
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {userInfoHttp,genealogyInfoHttp} from '@/common/http/api.js'
	export default {
		data() {
			return {
				token: '',
				genealogy: '',
				loading: true
			};
		},
		computed:{
			userInfo(){
				return this.$store.state.userInfo
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			if(this.token) {
				this.$store.dispatch('getUserInfo').then(res=>{
					if(!res.data.genealogy_id) return
					genealogyInfoHttp({id: res.data.genealogy_id}).then(res=>{
						this.genealogy = res.data
					})
				})
				
			}
			
		},
		methods:{
			create(){
				if(this.token) {
					uni.navigateTo({
						url:'/pages/genealogy/create/create'
					})
				} else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			toPage(name) {
				switch (name){
					case '家谱树':
						uni.navigateTo({
							url:'/pages/genealogy/tree/tree?id=' + this.genealogy.info.id
						})
						break;
					case '字辈谱':
						uni.navigateTo({
							url:'/pages/genealogy-characters/genealogy-characters'
						})
						break;
					case '纪念馆':
						uni.navigateTo({
							url:'/pages/memorial-hall/select'
						})
						break;
					default:
						break;
				}
			}
 		}
	}
</script>

<style lang="scss">
	page {
		background: #EFE9DD;
	}
	.noData {
		width: 100%;
		height: 100vh;
		flex-direction: column;
		.noData-title {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 30rpx;
			color: #84643B;
			margin-bottom: 45rpx;
		}
		.noData-btn {
			width: 580rpx;
			height: 99rpx;
			background: #84643B;
			border-radius: 50rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.header {
		width: 100%;
		height: 290rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 20rpx;
		.header-bg {
			width: 100%;
		}
		.header-c {
			width: 100%;
			box-sizing: border-box;
			padding:0 37rpx;
			position: absolute;
			top: 30rpx;
			left: 0;
			.header-c-l {
				min-width: 0;
				flex: 1;
				.header-c-l-list {
					width: 100%;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 30rpx;
					color: #fff;
					margin-bottom: 10rpx;
					text {
						color: #EBBB59;
						margin-right: 15rpx;
					}
				}
			}
			.header-c-r {
				width: 144rpx;
				height: 144rpx;
			}
		}
		.header-f {
			width: 100%;
			height: 90rpx;
			background: rgba(0,0,0,0.3);
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			.header-f-l {
				flex: 1;
				display: flex;
				align-items: center;
				&>view {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.header-f-l-num {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 36rpx;
						color: #fff;
					}
					.header-f-l-title {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 22rpx;
						color: rgba(255,255,255,0.6);
					}
				}
			}
			.header-f-r {
				width: 251rpx;
				height: 90rpx;
				background: #D30C0C;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 34rpx;
				color: #FFFFFF;
			}
		}
	}
	.user {
		width: 100%;
		height: 110rpx;
		background: #F6F1E7;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		.user-l {
			flex: 1;
			display: flex;
			align-items: center;
			.user-l-img {
				width: 92rpx;
				height: 92rpx;
				margin-right: 20rpx;
				image {
					border-radius: 50%;
				}
			}
			.user-l-name {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
				margin-right: 20rpx;
			}
			.user-l-status {
				width: 36rpx;
				height: 36rpx;
				margin-right: 12rpx;
			}
			.user-l-title {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 24rpx;
				color: #FD890D;
			}
		}
		.user-r {
			width: 16rpx;
			height: 26rpx;
		}
	}
	.tab {
		background: #F6F1E7;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		height: 170rpx;
		display: grid;
		grid-template-columns: repeat(4,1fr);
		.tab-item {
			flex-direction: column;
			image {
				width: 31rpx;
				height: 31rpx;
				margin-bottom: 13rpx;
			}
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}
	}
	.introduction {
		background: #F6F1E7;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding: 30rpx;
		.introduction-t {
			margin-bottom: 30rpx;
			.introduction-t-name {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
			}
			.introduction-t-r {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				image {
					width: 14rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}
			}
		}
		.introduction-c {
			background: #FFFFFF;
			border: 6px solid #333333;
			box-sizing: border-box;
			padding: 2rpx;
			
			&>view {
				border: 1px solid #333333;
				padding-bottom: 30rpx;
				.introduction-c-avatar {
					width: 100%;
					
					image {
						width: 472rpx;
						margin: 30rpx 0;
					}
				}
				.introduction-c-name {
					width: 100%;
					text-align: center;
					margin-bottom: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
				}
				.introduction-c-tx {
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
					text-indent: 2em;
					box-sizing: border-box;
					padding: 0 20rpx;
				}
			}
		}
		.introduction-tx {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 24rpx;
			color: #666666;
		}
	}
	.development {
		width: 100%;
		position: relative;
		.development-list {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.development-l {
				width: 120rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 36rpx;
				color: #84643B;
				margin-right: 30rpx;
				position: relative;
			}
			.development-l::after {
				width: 12rpx;
				height: 12rpx;
				background: #FFFFFF;
				border-radius: 50%;
				border: 1px solid #84643B;
				content: "";
				position: absolute;
				right: -6rpx;
				top: calc(50% - 10rpx);
				transform: rotateY(-50%);
				margin: auto;
				z-index: 9;
			}
			.development-r {
				width: 388rpx;
				background: #EFE9DD;
				border-radius: 8rpx;
				box-sizing: border-box;
				padding: 15rpx 23rpx;
				font-family: Source Han Sans CN;
				font-weight: 800;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}
	.development::after {
		width: 1rpx;
		height: 100%;
		position: absolute;
		content: "";
		left: 118rpx;
		top: 0;
		background: #84643B;
	}
</style>
